import 'package:demo_app2/widget/my_swiper.dart';
import 'package:flutter/material.dart';
import './product_detail.dart';

//轮播图子项对象
class SwiperPic {
  String title;
  String url;
  String path;
  SwiperPic(this.title, this.url, this.path);
}
//超值拼团对象
class SuperValCollage {
  String img;
  String name;
  String desc;
  double nowPrice;
  double oriPrice;
  SuperValCollage(this.img, this.name, this.desc, this.nowPrice, this.oriPrice);
}
//热销机型对象
class GoodInfo {
  String img;
  String name;
  String desc;
  double price;
  GoodInfo(this.img, this.name, this.desc, this.price);
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<SwiperPic> list = [
    SwiperPic('图一','https://www.baidu.com','assets/images/slide1.jpg'),
    SwiperPic('图二','https://www.baidu.com','assets/images/slide2.jpg'),
    SwiperPic('图三','https://www.baidu.com','assets/images/slide3.jpg'),
  ];
  List<SuperValCollage> superValCollage = [
    SuperValCollage('assets/images/pintuan1.png', 'vivo 2A USB数据线', '官方原装正品，支持18W有限快充', 9.9, 19),
    SuperValCollage('assets/images/pintuan2.png', '闪迪至尊版存储卡64G', '传输速度100MB/秒，更快，更便捷', 79, 99),
    SuperValCollage('assets/images/pintuan1.png', 'vivo 2A USB数据线', '官方原装正品，支持18W有限快充', 9.9, 19),
    SuperValCollage('assets/images/pintuan2.png', '闪迪至尊版存储卡64G', '传输速度100MB/秒，更快，更便捷', 79, 99),
    SuperValCollage('assets/images/pintuan1.png', 'vivo 2A USB数据线', '官方原装正品，支持18W有限快充', 9.9, 19),
    SuperValCollage('assets/images/pintuan2.png', '闪迪至尊版存储卡64G', '传输速度100MB/秒，更快，更便捷', 79, 99),
  ];
  List<GoodInfo> hotPhone = [
    GoodInfo('assets/images/phone1.png', 'IQQO Z1', '全球首款5G+5G 双卡双待，超长待机', 2299),
    GoodInfo('assets/images/phone2.png', 'vivo Y3', '5000mAh大电池', 1198),
    GoodInfo('assets/images/phone2.png', 'vivo Y3', '5000mAh大电池', 1198),
    GoodInfo('assets/images/phone1.png', 'IQQO Z1', '全球首款5G+5G 双卡双待，超长待机', 2299),
    GoodInfo('assets/images/phone1.png', 'IQQO Z1', '全球首款5G+5G 双卡双待，超长待机', 2299),
    GoodInfo('assets/images/phone2.png', 'vivo Y3', '5000mAh大电池', 1198),
    GoodInfo('assets/images/phone2.png', 'vivo Y3', '5000mAh大电池', 1198),
    GoodInfo('assets/images/phone1.png', 'IQQO Z1', '全球首款5G+5G 双卡双待，超长待机', 2299),
  ];
  List<GoodInfo> phoneParts = [
    GoodInfo('assets/images/parts1.png', 'X30 Pro手机保护壳', '其境系列设计 | 精准适合手机的保护套', 29),
    GoodInfo('assets/images/parts2.png', 'iQOO 5A Type-C充电线', '其境系列设计 | 精准适合手机的保护套', 59),
    GoodInfo('assets/images/parts2.png', 'iQOO 5A Type-C充电线', '其境系列设计 | 精准适合手机的保护套', 59),
    GoodInfo('assets/images/parts1.png', 'X30 Pro手机保护壳', '其境系列设计 | 精准适合手机的保护套', 29),
    GoodInfo('assets/images/parts1.png', 'X30 Pro手机保护壳', '其境系列设计 | 精准适合手机的保护套', 29),
    GoodInfo('assets/images/parts2.png', 'iQOO 5A Type-C充电线', '其境系列设计 | 精准适合手机的保护套', 59),
    GoodInfo('assets/images/parts2.png', 'iQOO 5A Type-C充电线', '其境系列设计 | 精准适合手机的保护套', 59),
    GoodInfo('assets/images/parts1.png', 'X30 Pro手机保护壳', '其境系列设计 | 精准适合手机的保护套', 29),
    GoodInfo('assets/images/parts1.png', 'X30 Pro手机保护壳', '其境系列设计 | 精准适合手机的保护套', 29),
    GoodInfo('assets/images/parts2.png', 'iQOO 5A Type-C充电线', '其境系列设计 | 精准适合手机的保护套', 59),
  ];

  @override
  Widget build(BuildContext context) {
    final _width = MediaQuery.of(context).size.width;
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      primary: true,
      physics: const ScrollPhysics(),
      child: Container(
        color: const Color.fromARGB(1, 245, 245, 245),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SizedBox( // 轮播图
              width: MediaQuery.of(context).size.width,
              height: 250.0,
              child: MySwiper(swiperList: list, defalutStyle: false,),
            ),
            Container( // 图标文字
              padding: const EdgeInsets.fromLTRB(0, 8.0, 0, 8.0),
              margin: const EdgeInsets.only(bottom: 10.0),
              color: Colors.white,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: const [
                      Icon(Icons.verified_user, size: 15, color: Color(0xff999999)),
                      Text(
                        ' 官方正品',
                        style: TextStyle(
                          color: Color(0xff404040),
                          fontSize: 12.0
                        ),
                      )
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: const [
                      Icon(Icons.local_shipping, size: 15, color: Color(0xff999999)),
                      Text(
                        ' 顺丰极速达',
                        style: TextStyle(
                          color: Color(0xff404040),
                          fontSize: 12.0
                        ),
                      )
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: const [
                      Icon(Icons.favorite, size: 15, color: Color(0xff999999)),
                      Text(
                        ' 全国联保',
                        style: TextStyle(
                          color: Color(0xff404040),
                          fontSize: 12.0
                        ),
                      )
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: const [
                      Icon(Icons.panorama_fish_eye, size: 15, color: Color(0xff999999)),
                      Text(
                        ' 镭雕定制',
                        style: TextStyle(
                          color: Color(0xff404040),
                          fontSize: 12.0
                        ),
                      )
                    ],
                  )
                ],
              ),
            ),
            Container( // 超值拼团
              color: Colors.white,
              margin: const EdgeInsets.only(bottom: 10.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  const Padding( // 标题文字
                    padding: EdgeInsets.fromLTRB(0, 15.0, 0, 15.0),
                    child: Center(
                      child: Text(
                        '— 超值拼团 —',
                        style: TextStyle(
                          fontSize: 17.0,
                          color: Colors.black
                        ),
                      ),
                    ),
                  ),
                  SingleChildScrollView( // 商品信息
                    scrollDirection: Axis.horizontal,
                    primary: true,
                    physics: const ScrollPhysics(),
                    padding: const EdgeInsets.fromLTRB(16.0, 10, 16.0, 21.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: superValCollage.map((item){
                        return Padding( //单个拼单商品
                          padding: const EdgeInsets.fromLTRB(2.0, 0, 2.0, 0),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              Image(image: AssetImage(item.img), width: 140.0, height: 140.0,),
                              Container( //商品名称
                                width: 140.0,
                                padding: const EdgeInsets.all(7.5),
                                child: Center(
                                  child: Text(
                                    item.name,
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: const TextStyle(
                                      color: Colors.black,
                                      fontSize: 12.0
                                    ),
                                  ),
                                ),
                              ),
                              Container( //商品详情
                                width: 140.0,
                                padding: const EdgeInsets.fromLTRB(7.5, 0, 7.5, 0),
                                child: Center(
                                  child: Text(
                                    item.desc,
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: const TextStyle(
                                      color: Color(0xff626262),
                                      fontSize: 12.0
                                    ),
                                  ),
                                ),
                              ),
                              Container( //拼团价
                                width: 140.0,
                                padding: const EdgeInsets.fromLTRB(11, 7.5, 11, 7.5),
                                child: Center(
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      const Text('拼团价：', style: TextStyle(fontSize: 12.0),),
                                      Text(
                                        '¥${item.nowPrice}',
                                        maxLines: 1,
                                        overflow: TextOverflow.ellipsis,
                                        style: const TextStyle(
                                          color: Color(0xfff00003),
                                          fontSize: 12.0
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              ),
                              SizedBox( //原价
                                width: 140.0,
                                child: Center(
                                  child: Text( '${item.oriPrice}', style: const TextStyle(
                                    color: Color(0xffd0d0d0),
                                    fontSize: 12.0,
                                    decoration: TextDecoration.lineThrough),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        );
                      }).toList(),
                    ),

                  ),
                  GestureDetector(
                    onTap: (){ print('没有更多超值拼团');},
                    child: Container(
                      height: 51.0,
                      decoration: const BoxDecoration(
                          border: Border(top: BorderSide(width: 1.0, color: Color(0xffe4e4e4)))
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: const [
                          Text('查看更多 ', style: TextStyle(color: Color(0xffa0a0a0), fontSize: 13.0)),
                          Icon(Icons.arrow_forward_ios_rounded, color: Color(0xffa0a0a0), size: 13.0,)
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Container( // 热销机型
              color: Colors.white,
              margin: const EdgeInsets.only(bottom: 10.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  const Padding( // 标题文字
                    padding: EdgeInsets.fromLTRB(0, 15.0, 0, 15.0),
                    child: Center(
                      child: Text(
                        '— 热销机型 —',
                        style: TextStyle(
                            fontSize: 17.0,
                            color: Colors.black
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: hotPhone.length * (_width * 1.25) / 4,
                    child: GridView.builder(
                      physics: const NeverScrollableScrollPhysics(), //禁用滚动
                      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 2,
                          mainAxisSpacing: 0,
                          crossAxisSpacing: 0,
                          childAspectRatio: 0.8
                      ),
                      // scrollDirection: Axis.vertical,
                      itemCount: hotPhone.length,
                      itemBuilder: (BuildContext context, int index ) {
                        return Container(
                          padding: const EdgeInsets.fromLTRB(20, 10, 20, 20),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              GestureDetector(
                                child: Image(image: AssetImage(hotPhone[index].img), width: 104.0, height: 128.0,),
                                onTap: () {
                                  Navigator.of(context).push(MaterialPageRoute(builder: (context)=>const ProductDetail()));
                                },
                              ),
                              Container( //商品名称
                                padding: const EdgeInsets.fromLTRB(0,19,0,4),
                                child: Center(
                                  child: Text(
                                    hotPhone[index].name,
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: const TextStyle(
                                        color: Colors.black,
                                        fontSize: 14.0
                                    ),
                                  ),
                                ),
                              ),
                              SizedBox( //商品详情
                                child: Center(
                                  child: Text(
                                    hotPhone[index].desc,
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: const TextStyle(
                                        color: Color(0xff585858),
                                        fontSize: 12.0
                                    ),
                                  ),
                                ),
                              ),
                              Container( //价格
                                padding: const EdgeInsets.only(top: 10.0),
                                child: Center(
                                    child: Text(
                                      '¥${hotPhone[index].price}',
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                      style: const TextStyle(
                                          color: Color(0xfff00003),
                                          fontSize: 12.0
                                      ),
                                    )
                                ),
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                  ),
                  GestureDetector(
                    onTap: (){ print('没有更多热销机型');},
                    child: Container(
                      height: 51.0,
                      decoration: const BoxDecoration(
                          border: Border(top: BorderSide(width: 1.0, color: Color(0xffe4e4e4)))
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: const [
                          Text('查看更多 ', style: TextStyle(color: Color(0xffa0a0a0), fontSize: 13.0)),
                          Icon(Icons.arrow_forward_ios_rounded, color: Color(0xffa0a0a0), size: 13.0,)
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Container( // 精品配件
              color: Colors.white,
              margin: const EdgeInsets.only(bottom: 10.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  const Padding( // 标题文字
                    padding: EdgeInsets.fromLTRB(0, 15.0, 0, 15.0),
                    child: Center(
                      child: Text(
                        '— 精品配件 —',
                        style: TextStyle(
                            fontSize: 17.0,
                            color: Colors.black
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: phoneParts.length * (_width * 1.25) / 4,
                    child: GridView.builder(
                      physics: const NeverScrollableScrollPhysics(), //禁用滚动
                      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 2,
                          mainAxisSpacing: 0,
                          crossAxisSpacing: 0,
                          childAspectRatio: 0.8
                      ),
                      // scrollDirection: Axis.vertical,
                      itemCount: phoneParts.length,
                      itemBuilder: (BuildContext context, int index ) {
                        return Container(
                          padding: const EdgeInsets.fromLTRB(20, 10, 20, 20),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              GestureDetector(
                                child: Image(image: AssetImage(phoneParts[index].img), width: 138.0, height: 138.0,),
                                onTap: () {print('你点了精品配饰');},
                              ),
                              Container( //商品名称
                                width: 138.0,
                                padding: const EdgeInsets.fromLTRB(0,14,0,4),
                                child: Center(
                                  child: Text(
                                    phoneParts[index].name,
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: const TextStyle(
                                        color: Colors.black,
                                        fontSize: 14.0
                                    ),
                                  ),
                                ),
                              ),
                              SizedBox( //商品详情
                                width: 138.0,
                                child: Center(
                                  child: Text(
                                    phoneParts[index].desc,
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: const TextStyle(
                                        color: Color(0xff585858),
                                        fontSize: 12.0
                                    ),
                                  ),
                                ),
                              ),
                              Container( //价格
                                padding: const EdgeInsets.only(top: 10.0),
                                child: Center(
                                    child: Text(
                                      '¥${phoneParts[index].price}',
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                      style: const TextStyle(
                                          color: Color(0xfff00003),
                                          fontSize: 12.0
                                      ),
                                    )
                                ),
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                  ),
                  GestureDetector(
                    onTap: (){ print('没有更多精品配饰');},
                    child: Container(
                      height: 51.0,
                      decoration: const BoxDecoration(
                          border: Border(top: BorderSide(width: 1.0, color: Color(0xffe4e4e4)))
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: const [
                          Text('查看更多 ', style: TextStyle(color: Color(0xffa0a0a0), fontSize: 13.0)),
                          Icon(Icons.arrow_forward_ios_rounded, color: Color(0xffa0a0a0), size: 13.0,)
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      )
    );
  }
}
